<template>
  <div class="scrollbar">
    <el-scrollbar>
      <el-form label-position="right" :model="selectTable" ref="addForm" label-width="120px" autocomplete="off" size="medium">
        <div class="title">{{title}}分类</div>
        <el-collapse v-model="card">
          <el-collapse-item title="基本信息" name="1">
            <el-row>
              <el-col v-if="selectTable.method==='edit'">
                <el-form-item label="复制网址">
                  <el-input v-model="selectTable.manuscriptPath" maxLength="100" style="width: 70%;" disabled></el-input>
                  <el-button icon="el-icon-tickets" v-clipboard:copy='selectTable.manuscriptPath' v-clipboard:success='clipboardSuccess'>复制</el-button>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="名称" prop="columnName" :rules="[rule[0]]">
                  <el-input v-model="selectTable.columnName" placeholder="请输入" maxLength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="别名" prop="alias" :rules="[rule[0],rule[1]]">
                  <el-input v-model="selectTable.alias" placeholder="请输入" maxLength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="PC列表模板" prop="tempId">
                  <tplselect v-model="selectTable.tempId"></tplselect>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="PC详情模板" prop="templetId">
                  <tplselect v-model="selectTable.templetId"></tplselect>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="WAP列表模板" prop="mFirstListTempletId">
                  <tplselect v-model="selectTable.mFirstListTempletId"></tplselect>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="WAP详情模板" prop="mDetailTempletId">
                  <tplselect v-model="selectTable.mDetailTempletId"></tplselect>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="分页数量" prop="pageSize" :rules="[rule[0]]">
                  <el-input-number style="width:160px" v-model="selectTable.pageSize" controls-position="right" :min="1" :max="1000"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="生成页数" prop="pageNum" :rules="[rule[0]]">
                  <el-input-number style="width:160px" v-model="selectTable.pageNum" controls-position="right" :min="1" :max="1000"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="状态" prop="columnStatus" :rules="[rule[0]]">
                  <el-switch v-model="selectTable.columnStatus" :active-value="0" :inactive-value="1" active-text="启用" inactive-text="停用">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="备注" prop="comment">
                  <el-input placeholder="请输入备注" v-model="selectTable.comment" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="SEO" name="3">
            <el-row>
              <el-col>
                <el-form-item label="SEO标题" prop="seoHeadline">
                  <el-input placeholder="请输入SEO标题" v-model="selectTable.seoHeadline" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="SEO关键字" prop="seoKeyword">
                  <el-input placeholder="请输入SEO关键字" v-model="selectTable.seoKeyword" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="SEO描述" prop="seoDepict">
                  <el-input type="textarea" placeholder="请输入SEO描述" v-model="selectTable.seoDepict" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="扩展属性" name="2">
            <el-row :gutter="10" class="ext">
              <el-col :span="14">
                属性名称
              </el-col>
              <el-col :span="10">
                属性类型
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <template v-for="(item,index) in selectTable.contentMappingList">
                <el-col :span="14">
                  <el-form-item label="" label-width="0" :prop="`contentMappingList[${index}].customName`" :rules="[rule[0],{ validator: ruleCheck, trigger: ['blur','change'] }]" style="margin-bottom:16px">
                    <el-input size="mini" placeholder="请输入" v-model="item.customName" maxLength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" label-width="0" :prop="`contentMappingList[${index}].contentType`" :rules="[rule[0]]" style="margin-bottom:0">
                    <extType v-model="item.contentType"></extType>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="" label-width="0" style="margin-bottom:0">
                    <el-button size="mini" @click="handleRemove(index)" icon="el-icon-minus" style="padding:7px 8px;"></el-button>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="22">
                <div class="add">添加一个新的属性</div>
              </el-col>
              <el-col :span="2">
                <el-form-item label="" label-width="0" style="margin-bottom:0">
                  <el-button size="mini" type="success" @click="handleAdd" icon="el-icon-plus" style="padding:7px 8px;"></el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </el-scrollbar>
    <div v-loading="pload" class="footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  overflow: hidden;
  padding-bottom: 50px;
  position: relative;
  .el-scrollbar {
    height: 100%;
  }
  .el-form {
    padding: 20px;
  }
  .title {
    text-align: center;
    font-size: 16px;
    border-bottom: 1px #e4e4e4 solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  .ext {
    font-size: 14px;
    line-height: 32px;
    background: #f4f4f4;
    margin-bottom: 10px;
  }
  .add {
    line-height: 36px;
    font-size: 14px;
    background: #f9f9f9;
    text-align: right;
    color: #888888;
    padding-right: 15px;
  }
}
</style>
<script>
import { cateSave, cateModify } from '@/utils/api'
import clipboard from '@/directive/clipboard/index.js'
export default {
  directives: {
    clipboard
  },
  components: {
    tplselect: () => import('../sysTpl/tplSelect'),
    extType: () => import('./extType')
  },
  props: {
    data: Object
  },
  created() {
    this.selectTable = this.JSONo({}, this.data)
  },
  computed: {
    title() {
      if (this.selectTable.method === 'edit') {
        return '修改'
      } else if (this.selectTable.method === 'add') {
        return '添加'
      }
    }
  },
  data() {
    const check = (rule, value, callback) => {
      if (/[^a-z]/i.test(value)) {
        callback(new Error('只能输入英文字母'))
      } else {
        callback()
      }
    }
    return {
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'blur' },
        { validator: check, trigger: 'change' }
      ],
      show: true,
      selectTable: {},
      card: ['1', '2', '3']
    }
  },
  methods: {
    ruleCheck(rule, value, callback) {
      if (value === '') {
        callback()
      } else {
        let num = 0
        this.selectTable.contentMappingList.forEach(item => {
          if (item.customName === value) {
            num++
          }
        })
        if (num > 1) {
          callback(new Error('属性名称不可重复'))
        } else {
          callback()
        }
      }
    },
    clipboardSuccess() {
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1500
      })
    },
    handleAdd() {
      this.selectTable.contentMappingList.push({
        customName: null,
        customType: 1
      })
    },
    handleRemove(index) {
      this.selectTable.contentMappingList.splice(index, 1)
    },
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true

        if (this.selectTable.method === 'edit') {
          delete this.selectTable.children
          delete this.selectTable.parent
          await cateModify(this.selectTable)
          this.$emit('setData', this.selectTable)
        } else if (this.selectTable.method === 'add') {
          const res = await cateSave(this.selectTable)
          this.$emit('setData', res.data)
        }
        this.$notify({ title: '操作成功', type: 'success', duration: 2000 })
        this.$emit('close')
      } catch (e) {
        this.pload = false
      }
    }
  }
}
</script>